<template>
  <Layout>
    <Form ref="form1" :model="dataToQuery" :label-width="120">
      <Row class="query-form">
        <Col span="8">
          <FormItem label="二级集团：" prop="twoLevelOrgName">
            <Select v-model="dataToQuery.twoLevelOrgName" filterable>
              <Option v-for="item in twoLevelOrgs" :value="item.orgName" :key="item.orgId">{{ item.orgName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='企业名称：'>
            <Select clearable filterable style="width:300px" v-model="dataToQuery.companyName" placeholder="请选择企业"
                    :remote-method="remoteMethodSelectOrg"
                    :default-label="defaultLabel"
                    :loading="orgLoading">
              <Option v-for="(option, index) in orgLists" :value="option.orgName" :key="index">{{ option.orgName }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8" v-if="!switchFlag">
          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
        <Col span="8" v-else>
            <FormItem label="危化品库：">
              <Input  type="text" v-model="dataToQuery.hcmName"></Input>
            </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8" offset="16">
          <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
          <download-button :api="exportUrl" :queryForm="dataToQuery" />
          <!-- <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出</Button> -->
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
      @on-sort-change="sortChange" :loading='pageStatus.loading' border :columns="columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>
    <Modal :title="this.getModalTitle('危化品检查')" :transfer=false :mask-closable="false" v-model="dialogShow"
           v-if="dataToView && dialogShow" :width=800 class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false"
                :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?140:null"
                :label-position="mode === 'view'?'right':'top'">

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='单位名称：' prop='companyId'>
                  <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                  <!--<Input v-else class='query-form-el' placeholder="请填写单位名称" type='text' v-model='dataToView.companyId'></Input>-->
                  <div v-else>
                    <cascader-dom class='query-form-el' ref='orgCascader' @setOrgInfo='setCompanyId'
                                  @setOrgname="setCompanyName" :orgTree="true"
                                  :currentOrgId="dataToView.companyId" :rootOrgId="dataToView.belongOrgId"
                                  :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}"></cascader-dom>
                  </div>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='检查月份：' prop='checkMonth'>
                  <div v-if="mode === 'view'">{{ renderViewMonth(dataToView.checkMonth) }}</div>
                  <DatePicker v-else class="query-form-el" placeholder="请选择检查月份" type="month"
                              v-model='dataToView.checkMonth'></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='危化品库：' prop='hcmId'>
                  <div v-if="mode === 'view'">{{ dataToView.hcmName }}</div>
                  <div v-else>
                    <!--<Input class='query-form-el' placeholder="请选择危化品名称" type='text'-->
                    <!--v-model='dataToView.hcmName' @on-focus="modelTcheme=true" readonly  suffix="ios-search"></Input>-->
                    <Input class='query-form-el' placeholder="请选择危化品名称" type='text'
                           v-model='dataToView.hcmName' @on-focus="openExpertSelector" readonly
                           suffix="ios-search"></Input>
                  </div>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="23" class="query-form" style="margin-left: 15px">
                <Button v-if="mode !== 'view'" class="ivu-btn-add" icon="md-add"
                        @click="itemModel=true,itemAdd=true;detailItem={number:0}">新增应急物资
                </Button>
                <Table highlight-row stripe border style="margin-top:10px;margin-bottom: 10px" :max-height="350"
                       :columns="itemColumn"
                       :data="dataToView.items">
                </Table>
              </Col>

            </Row>

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='安全措施：' prop='safetyMeasures'>
                  <div v-if="mode === 'view'">{{ dataToView.safetyMeasures }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写安全措施" type='text'
                         show-word-limit maxlength="200" v-model='dataToView.safetyMeasures'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around"
                 class="code-row-bg">
              <Col span="23">
                <FormItem v-if="mode === 'view'" label="安全措施附件：">
                  <div v-show="dataToView.idFiles.filter(t=>t.field==='1').length>0"
                       v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='1')">
                    <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{
                        item.fileName
                      }}</span></a>
                    <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                  </div>
                </FormItem>
                <FormItem v-else label="安全措施：" prop="idFiles">
                  <div>
                    <Upload ref="upload"
                            :before-upload="(file) => { beforeUpload1(file, 'id', 'hcmCheck/1') }"
                            :show-upload-list="true"
                            :max-size="10240"
                            multiple
                            type="drag"
                            :action="fileUrl">
                      <div style="padding: 10px">
                        <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                        <p>点击将文件拖拽到这里上传</p>
                        <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                      </div>
                    </Upload>
                  </div>
                  <div v-show="dataToView.idFiles.filter(t=>t.field==='1').length>0"
                       v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='1')"
                       :key='item'>
                    <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                    <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'hcmCheck/1')"
                            style="margin-left: 5px;margin-bottom: 3px"/>
                    <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                    <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                  </div>
                </FormItem>
              </Col>
            </Row>

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='消防措施：' prop='fireFightingMeasures'>
                  <div v-if="mode === 'view'">{{ dataToView.fireFightingMeasures }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写消防措施" type='text' show-word-limit
                         maxlength="200"
                         v-model='dataToView.fireFightingMeasures'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem v-if="mode === 'view'" label="消防措施附件：">
                  <div v-show="dataToView.idFiles.filter(t=>t.field==='2').length>0"
                       v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='2')">
                    <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{
                        item.fileName
                      }}</span></a>
                    <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                  </div>
                </FormItem>
                <FormItem v-else label="消防措施：" prop="idFiles">
                  <div>
                    <Upload ref="upload"
                            :before-upload="(file) => { beforeUpload1(file, 'id', 'hcmCheck/2') }"
                            :show-upload-list="true"
                            :max-size="10240"
                            multiple
                            type="drag"
                            :action="fileUrl">
                      <div style="padding: 10px">
                        <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                        <p>点击将文件拖拽到这里上传</p>
                        <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                      </div>
                    </Upload>
                  </div>
                  <div v-show="dataToView.idFiles.filter(t=>t.field==='2').length>0"
                       v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='2')"
                       :key='item'>
                    <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                    <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'hcmCheck/2')"
                            style="margin-left: 5px;margin-bottom: 3px"/>
                    <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                    <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                  </div>
                </FormItem>
              </Col>
            </Row>

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='防爆措施：' prop='explosionProofMeasures'>
                  <div v-if="mode === 'view'">{{ dataToView.explosionProofMeasures }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写防爆措施" type='text'
                         show-word-limit maxlength="200" v-model='dataToView.explosionProofMeasures'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around"
                 class="code-row-bg">
              <Col span="23">
                <FormItem v-if="mode === 'view'" label="防爆措施附件：">
                  <div v-show="dataToView.idFiles.filter(t=>t.field==='3').length>0"
                       v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='3')">
                    <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{
                        item.fileName
                      }}</span></a>
                    <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                  </div>
                </FormItem>
                <FormItem v-else label="防爆措施：" prop="idFiles">
                  <div>
                    <Upload ref="upload"
                            :before-upload="(file) => { beforeUpload1(file, 'id', 'hcmCheck/3') }"
                            :show-upload-list="true"
                            :max-size="10240"
                            multiple
                            type="drag"
                            :action="fileUrl">
                      <div style="padding: 10px">
                        <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                        <p>点击将文件拖拽到这里上传</p>
                        <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                      </div>
                    </Upload>
                  </div>
                  <div v-show="dataToView.idFiles.filter(t=>t.field==='3').length>0"
                       v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='3')"
                       :key='item'>
                    <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                    <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'hcmCheck/3')"
                            style="margin-left: 5px;margin-bottom: 3px"/>
                    <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                    <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                  </div>
                </FormItem>
              </Col>
            </Row>

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='安全标识：' prop='safetySigns'>
                  <div v-if="mode === 'view'">{{ dataToView.safetySigns }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写安全标识" type='text'
                         show-word-limit maxlength="200" v-model='dataToView.safetySigns'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around"
                 class="code-row-bg">
              <Col span="23">
                <FormItem v-if="mode === 'view'" label="安全标识附件：">
                  <div v-show="dataToView.idFiles.filter(t=>t.field==='4').length>0"
                       v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='4')">
                    <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{
                        item.fileName
                      }}</span></a>
                    <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                  </div>
                </FormItem>
                <FormItem v-else label="安全标识：" prop="idFiles">
                  <div>
                    <Upload ref="upload"
                            :before-upload="(file) => { beforeUpload1(file, 'id', 'hcmCheck/4') }"
                            :show-upload-list="true"
                            :max-size="10240"
                            multiple
                            type="drag"
                            :action="fileUrl">
                      <div style="padding: 10px">
                        <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                        <p>点击将文件拖拽到这里上传</p>
                        <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                      </div>
                    </Upload>
                  </div>
                  <div v-show="dataToView.idFiles.filter(t=>t.field==='4').length>0"
                       v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='4')"
                       :key='item'>
                    <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                    <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'hcmCheck/4')"
                            style="margin-left: 5px;margin-bottom: 3px"/>
                    <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                    <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                  </div>
                </FormItem>
              </Col>
            </Row>

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='分类分垛存储：' prop='classifiedStorage'>
                  <div v-if="mode === 'view'">{{ dataToView.classifiedStorage }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写分类分垛存储" type='text'
                         show-word-limit maxlength="200" v-model='dataToView.classifiedStorage'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around"
                 class="code-row-bg">
              <Col span="23">
                <FormItem v-if="mode === 'view'" label="分类分垛存储附件：">
                  <div v-show="dataToView.idFiles.filter(t=>t.field==='5').length>0"
                       v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='5')">
                    <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{
                        item.fileName
                      }}</span></a>
                    <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                  </div>
                </FormItem>
                <FormItem v-else label="分类分垛存储：" prop="idFiles">
                  <div>
                    <Upload ref="upload"
                            :before-upload="(file) => { beforeUpload1(file, 'id', 'hcmCheck/5') }"
                            :show-upload-list="true"
                            :max-size="10240"
                            multiple
                            type="drag"
                            :action="fileUrl">
                      <div style="padding: 10px">
                        <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                        <p>点击将文件拖拽到这里上传</p>
                        <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                      </div>
                    </Upload>
                  </div>
                  <div v-show="dataToView.idFiles.filter(t=>t.field==='5').length>0"
                       v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='5')"
                       :key='item'>
                    <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                    <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'hcmCheck/5')"
                            style="margin-left: 5px;margin-bottom: 3px"/>
                    <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                    <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                  </div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around"
                 class="code-row-bg">
              <Col span="23">
                <FormItem label="其他安全措施图片：" prop="idFiles">
                  <div class="demo-upload-list" v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='6')"
                       :key="index">
                    <img :src="uploadUrl+'/'+item.id">
                    <div class="demo-upload-list-cover">
                      <Icon type="ios-eye-outline" @click.native="handleView(item.id)"></Icon>
                      <Icon type="ios-trash-outline" v-if="mode !== 'view'"
                            @click.native="removeFile1(item.id, 'id', 'hcmCheck/6')"></Icon>
                    </div>
                  </div>
                  <Upload
                      v-if="mode !== 'view'"
                      ref="upload"
                      :show-upload-list="false"
                      :format="['jpg','jpeg','png','gif']"
                      accept="image/jpg, image/jpeg,image/png,image/gif,image/bmp"
                      :max-size="1024"
                      :before-upload="(file) => { beforeUpload1(file, 'id', 'hcmCheck/6') }"
                      multiple
                      type="drag"
                      :action="uploadUrl"
                      style="display: inline-block;width:58px;">
                    <div style="width: 58px;height:58px;line-height: 58px;">
                      <Icon type="ios-camera" size="20"></Icon>
                    </div>
                  </Upload>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='检查记录 ：' prop='checkRecord'>
                  <div v-if="mode === 'view'">{{ dataToView.checkRecord }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写检查记录 " type='text'
                         show-word-limit maxlength="200" :autosize="{minRow:2,maxRow:5}"
                         v-model='dataToView.checkRecord'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='填报人：' prop='createUserName'>
                  <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写填报人" type='text' readonly
                         v-model='dataToView.createUserName'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='填报时间：' prop='createDate'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                  <DatePicker v-else class="query-form-el" placeholder="请选择填报时间" readonly
                              v-model='dataToView.createDate'></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='填报人手机号：' prop='registrantPhone'>
                  <div v-if="mode === 'view'">{{ dataToView.registrantPhone }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写填报人手机号" type='text'
                         v-model='dataToView.registrantPhone'></Input>
                </FormItem>
              </Col>
              <Col span="11"></Col>
            </Row>
          </Form>

          <Modal title="危化品台账" :transfer=false footer-hide v-model="modelTcheme" :width=900>
            <hcmInfo v-if="modelTcheme" :modelTcheme="modelTcheme"
                     ref="selExpert" :selectHcmInfos='selectHcmInfo' @getActivityData="getActivityData"
                     @closeModal1="closeModal1" :companyId="dataToView.companyId"></hcmInfo>
          </Modal>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定
        </Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>

    <Modal :mask-closable="false" :transfer=false v-model="itemModel" :width=600 title="应急物资"
           @on-cancel="itemModel=false,detailItem={}">
      <Row>
        <Col span="24">
          <Form ref="itemForm" :class="'modal-form'" :show-message="false" :model="detailItem" :rules="itemRuleCustom"
                label-position="top">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="物资名称：" prop="materiaName">
                  <div v-if="mode === 'view'">{{ detailItem.materiaName }}</div>
                  <Input v-else class='query-form-el' type="text" show-word-limit maxlength="100"
                         v-model="detailItem.materiaName"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='数量：' prop='number'>
                  <div v-if="mode === 'view'">{{ detailItem.number }}</div>
                  <InputNumber v-else class='query-form-el' placeholder="请填写储存量" :min="0"
                               v-model='detailItem.number'></InputNumber>
                </FormItem>
              </Col>
            </Row>

          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="primary" class='ivu-btn-save' @click="itemSubmit('itemForm')">确定</Button>
        <Button type="primary" class='ivu-btn-cancel' @click="itemModel=false,detailItem={}">取消</Button>
      </div>
    </Modal>

  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import {sessionStorage} from '@/common/cacheUtils.js';

var cascaderDom = () => import('@/components/cascader-dom.vue');
import hcmInfo from './hcmInfo.vue'

export default {
  components: {cascaderDom, hcmInfo},
  data() {
    return {
      ...this.createCommonDataField(),
      defaultLabel: sessionStorage('userId').getObject('userId').companyName,
      orgLists: [],
      userInfo: sessionStorage('userId').getObject('userId'),
      twoLevelOrgs: [],
      orgLoading: false,
      switchFlag: false,
      columns1: [
        {title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'companyName', title: '单位名称', align: 'center', minWidth: 150,},
        {key: 'hcmName', title: '危化品库', align: 'center', minWidth: 120, tooltip: true},
        // { key:'hcmTypeName',title: '危化品种类',  align: 'center', minWidth: 120, },
        {key: 'checkMonth', title: '检查月份',sortable: "custom", align: 'center', minWidth: 120, render: this.renderCellMonth},
        {key: 'safetyMeasures', title: '安全措施', align: 'center', minWidth: 120, tooltip: true},
        {key: 'fireFightingMeasures', title: '消防措施', align: 'center', minWidth: 120, tooltip: true},
        {key: 'explosionProofMeasures', title: '防爆措施', align: 'center', minWidth: 120, tooltip: true},
        {key: 'safetySigns', title: '安全标识', align: 'center', minWidth: 120, tooltip: true},
        {key: 'classifiedStorage', title: '分类分垛存储', align: 'center', minWidth: 120, tooltip: true},
        {key: 'checkRecord', title: '检查记录 ', align: 'center', minWidth: 120, tooltip: true},

        {key: 'createDate', title: '填报时间',sortable: "custom", align: 'center', minWidth: 120, render: this.renderCellDate},
        // { key:'registrantPhone',title: '填报人手机号',  align: 'center',minWidth: 120, },
        this.getActionColumns(),
      ],
      show: true,
      ruleCustom: {
        companyId: [{required: true, message: '请填写单位名称', trigger: 'change',}],
        hcmId: [{required: true, message: '请填写危化品名称', trigger: 'change',}],
        checkMonth: [{required: true, message: '请选择检查月份', trigger: 'change', type: 'date'}],
        // safetyMeasures: [ { required: true, message: '请填写安全措施', trigger: 'change',}],
        // fireFightingMeasures: [ { required: true, message: '请填写消防措施', trigger: 'change',}],
        // explosionProofMeasures: [ { required: true, message: '请填写防爆措施', trigger: 'change',}],
        // safetySigns: [ { required: true, message: '请填写安全标识', trigger: 'change',}],
        // classifiedStorage: [ { required: true, message: '请填写分类分垛存储', trigger: 'change',}],
        // checkRecord: [ { required: true, message: '请填写检查记录 ', trigger: 'change',}],
        createUserName: [{required: true, message: '请填写填报人', trigger: 'change',}],
        createDate: [{required: true, message: '请填写填报时间', trigger: 'change', type: 'date'}],
        registrantPhone: [{
          validator: (rule, value, callback) => {
            if (!(/^1[3456789]\d{9}$/.test(this.dataToView.registrantPhone))) {
              callback(' ');
              // this.$Message.error("请填写有效的的手机号")
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'blur'
        }],
        // idFiles: [{
        //     validator: (rule, value, callback) => {
        //         if (this.dataToView.idFiles.filter(t=>t.field==='1').length < 1||
        //             this.dataToView.idFiles.filter(t=>t.field==='2').length < 1||
        //             this.dataToView.idFiles.filter(t=>t.field==='3').length < 1) {
        //             callback('附件必须上传')
        //         } else {
        //             callback()
        //         }
        //     },
        //     required: true,
        //     trigger: 'change'
        // }]
      },
      tableHeight: 10,
      dictMap: {},
      // api
      queryUrl: Api.hcmCheckList,
      exportUrl: Api.hcmCheckList + '/export',
      deleteUrl: Api.hcmCheckDelete,
      getUrl: Api.gethcmCheck,
      updateUrl: Api.hcmCheckUpdate,
      saveUrl: Api.hcmCheckAdd,

      uploadUrl: Api.uploadMongoFile,
      currentUser: JSON.parse(sessionStorage('userId').get('userId')),
      modelTcheme: false,
      selectHcmInfo: [],


      detailItem: {},
      itemModel: false,
      itemAdd: false,
      columns2: [
        {title: '序号', width: 70, align: 'center', render: this.indexColumnsRender},
        {key: 'materiaName', title: '物资名称', align: 'center', minWidth: 120,},
        {key: 'number', title: '数量', align: 'center', minWidth: 120,},
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 110,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '13px',},
                on: {
                  click: () => {
                    this.detailItem = {...params.row}
                    this.itemModel = true
                    this.itemAdd = false
                  }
                }
              }, '修改'),
              h('Divider', {props: {type: 'vertical'}}, ''),
              h('A', {
                props: {type: 'primary', size: 'small'},
                style: {fontSize: '13px', color: 'red'},
                on: {
                  click: () => {
                    this.dataToView.items.splice(params.index, 1)
                  }
                }
              }, '删除'),
            ])
          }
        }
      ],
      itemRuleCustom: {
        materiaName: [{required: true, message: '请填写危化品名称', trigger: 'change',}],
        number: [
          {required: true, message: '请填写储存量', trigger: 'change', type: 'number'}
          // { required: true,pattern: /(\d+(\.\d+)?)/, message: '储存量必须为数字', trigger: 'change'}
        ],
      },

    }
  },
  computed: {
    itemColumn() {
      const columns = [...this.columns2];
      const columns1 = []
      columns.forEach(item => {
        if (this.mode !== 'view') {
          columns1.push(item)
        } else {
          if (item.key !== 'action') {
            columns1.push(item)
          }
        }
      })
      return columns1
    },
  },
  mounted() {
    this.queryTwoOrgInfo();
    this.setTableHeight();
    this.query();
    let _this = this
    this.gDic(Api.queryCodeDetailBySortId + "/HCM-000001", function (result) {
      _this.dictMap.hcmTypes = result;
    });
  },
  methods: {
    ...pageCommonFunction,
    queryTwoOrgInfo() {
      if (sessionStorage('userId').getObject('userId').companyId != '18000000') {
        this.twoLevelOrgs.push({
          orgId: sessionStorage('userId').getObject('userId').twoLevelOrgId,
          orgName: sessionStorage('userId').getObject('userId').twoLevelOrgName
        });
      } else {
        this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
          this.twoLevelOrgs = res.data.data
        }).catch(e => {
        })
      }
    },
    remoteMethodSelectOrg(query) {
      if (query !== '') {
        this.orgLists = [];
        this.orgLoading = true;
        this.$http.get(Api.queryOrgList + "?companyId=" + this.userInfo.companyId + "&orgName=" + query + "&fromPage=1&pageSize=1000").then(res => {
          this.orgLists = res.data.data;
          this.orgLoading = false;
        }).catch(e => {
          this.orgLoading = false;
          this.$Message.error('请求失败');
        })
      } else {
        this.orgLoading = false;
      }
    },
    itemSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Modal.confirm({
            title: '提示',
            content: '<p>是否要提交？</p>',
            onOk: () => {
              let _this = this
              _this.dataToView.items.splice()
              if (_this.itemAdd) {
                _this.dataToView.items.push(_this.detailItem)
              } else {
                _this.dataToView.items[_this.detailItem._index] = _this.detailItem
              }
              _this.itemModel = false
            },
            onCancel: () => {
            }
          })
        } else {
          this.$Message.error('请填报完整!');
        }
      })
    },

    openExpertSelector() {
      this.modelTcheme = true;
      this.selectHcmInfo = []
      let hasVal = this.dataToView.hcmId && this.dataToView.hcmId.length > 1
      let mId = hasVal ? this.dataToView.hcmId.split(',') : []
      let mName = hasVal ? this.dataToView.hcmName.split(',') : []
      let i = 0
      mId.forEach(v => {
        let hcmNameInfo = {name: mName[i], userId: v}
        i++
        this.selectHcmInfo.push(hcmNameInfo)
      })
    },
    getActivityData(row) {
      this.$set(this.dataToView, 'hcmId', row.id)
      this.$set(this.dataToView, 'hcmName', row.warehouse)
      this.modelTcheme = false;

      // this.$set(this.dataToView,'hcmId',  row.ids.join(','))
      // this.$set(this.dataToView,'hcmName', row.hcmNames.join(','))
    },
    closeModal1() {
      this.modelTcheme = false;
      this.selectHcmInfo = []
    },


    deleteData(params) {
      this.deleteDateAjax(params);
    },
    query() {
      this.queryAjax();
    },

    submit(name) {
      if (this.dataToView.items.length < 1) {
        this.$Message.warning('应急物资至少填报一条');
      } else {
        this.submitAjax(name);
      }
    },
    createEmptyDataToAdd() {
      return {
        createDate: new Date(),
        createUserId: this.currentUser.userId,
        createUserName: this.currentUser.userName,
        id: this.get_uuid(),
        checkMonth: new Date(),
        idFiles: [],
        items: []
      }
    },
    async afterDataToViewInit() {
      await this.getFiles1('id', 'hcmCheck');
    },
  },
  watch: {},
}
</script>

<style lang='css' scoped>
.ivu-form-item {
  padding-right: 20px;
}

.query-form-el, .ivu-date-picker, .ivu-input-wrapper {
  width: 100%;
}

.demo-upload-list {
  display: inline-block;
  width: 70px;
  height: 70px;
  text-align: center;
  line-height: 70px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
